<template>
	<view class="category-container">
		<view class="header-box" v-if="statusCode">
			<view class="addree-box">
				<view class="address">
					<view class="title-box">
						<view class="title">湖州黄金芽品牌管理公司</view>
						<view @click="search" class="search-box">
							<uni-icons class="search-icon" type="search" size="16" color="#999"></uni-icons>
							<input class="search-input" placeholder="点击搜索" :disabled="true" />
						</view>
					</view>
					<view class="distance">湖州市吴兴区港南路2217号</view>
				</view>
				<view class="switch">
					<view class="uni-padding-wrap uni-common-mt">
						<uni-segmented-control :current="buyTypeCurrent" :values="buyType" styleType="button"
							activeColor="#dd524d" @clickItem="onClickBuyType" />
					</view>
					</u-subsection>
				</view>
			</view>
			<view class="tips" v-if="notice">
				<uni-icons color="#333" type="sound-filled" size="24"></uni-icons> <text
					style="margin-left:10upx">{{notice.content}}</text>
			</view>
		</view>

		<view class="VerticalBox" v-if="statusCode">
			<scroll-view class="VerticalNav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="">
				<view class="cu-item" :class="[index == tabCur ? 'text-green cur' : '']"
					v-for="(item, index) in goodsList" :key="index" @tap="TabSelect" :data-id="index">
					<view class="content">
						<view class="content-text">{{ item.title }}</view>
					</view>
				</view>
			</scroll-view>

			<scroll-view class="VerticalMain" :scroll-into-view="'main-' + mainCur" @scroll="VerticalMain" scroll-y
				scroll-with-animation>
				<view class="box" v-for="(item, index) in goodsList" :key="index" :id="'main-' + index"
					@click="read(item.id)">
					<view class="title">{{item.title}}</view>

					<view class="item-box" v-for="(item1, index1) in item.product">
						<view class="img-box">
							<image mode="widthFix" :src="item1.head"></image>
						</view>
						<view class="content-box">
							<view class="title-box">
								<view class="title">{{ item1.title }}</view>
								<view class="tag">
									<text class="tag-item">{{item1.popular}}</text>
									<text class="tag-item">{{item1.mode}}</text>
									<text class="tag-item">{{item1.material}}</text>
								</view>
								<view class="describe">
									{{ item1.describe }}
								</view>
							</view>

							<view class="btn">
								<view class="price"><text style="font-size: 20upx">￥</text>{{ item1.price }}</view>
								<view class="add">
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<loadingModel ref="loading" />
		</view>
		<errorModel ref="error" v-if="!statusCode" />
	</view>
</template>

<script>
	import loadingModel from '@/components/loading-model/loading-model.vue';
	import errorModel from '@/components/error-model/error-model.vue';
	export default {
		components: {
			loadingModel,
			errorModel
		},
		data() {
			return {
				statusCode: true,
				notice: null,
				title: '',
				tabCur: 0,
				mainCur: 0,
				goodsList: [],
				verticalNavTop: 0,
				buyType: ['自取', '配送'],
				buyTypeCurrent: 1,
				load: true,
			}
		},
		onLoad() {
			this.getGroupList()
			this.getNoticeLast()
		},
		methods: {
			search() {
				this.$Router.push({
					path: '/pages/search/search'
				})
			},
			VerticalMain(e) {
				let that = this
				let tabHeight = 0
				if (this.load) {
					for (let i = 0; i < this.goodsList.length; i++) {
						let view = uni.createSelectorQuery().select('#main-' + i)
						view
							.fields({
									size: true,
								},
								(data) => {
									this.goodsList[i].top = tabHeight
									tabHeight = tabHeight + data.height
									this.goodsList[i].bottom = tabHeight
								},
							)
							.exec()
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10
				for (let i = 0; i < this.goodsList.length; i++) {
					if (
						scrollTop > this.goodsList[i].top &&
						scrollTop < this.goodsList[i].bottom
					) {
						this.verticalNavTop = (i - 1) * 50
						this.tabCur = i
						return false
					}
				}
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id
				this.mainCur = e.currentTarget.dataset.id
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 60
			},

			getGroupList: function() {
				this.$myRequest('product/categroy', {}).then((res) => {
					let data = res.data
					this.goodsList = data

					this.$refs.loading.close()
				})
			},

			getNoticeLast: function() {
				this.$myRequest('notice/last', {}).then((res) => {
					let data = res.data.data
					if (data) {
						this.notice = data
					}
				})
			},
			onClickBuyType: function(e) {
				if (this.buyTypeCurrent != e.currentIndex) {
					this.buyTypeCurrent = e.currentIndex;
				}
			},
			read(id) {
				this.$Router.push({
					path: '/pages/detail/detail',
					query: {
						product_id: id
					}
				})
			}

		},
	}
</script>

<style lang="scss">
	.header-box {
		background: #fff;
		padding: 40upx;
		height: 140upx;
		border-bottom: 1px solid #f5f5f5;

		.addree-box {
			margin-bottom: 20upx;

			.address {
				width: 100%;

				.title-box {
					display: flex;
					font-size: 32upx;
					font-weight: 700;
					align-items: center;
					justify-content: space-between;

					.title {
						flex: 1;
						padding-right: 10upx;
					}

					.search-box {
						position: relative;
						z-index: 1;
						padding: 0 10upx;

						.search-icon {
							left: 20upx;
							top: 4upx;
							position: absolute;
						}

						.search-input {
							font-weight: 300;
							font-size: 24upx;
							border-radius: 20upx;
							padding-left: 46upx;
							padding-right: 30upx;
							border: 1px solid $uni-border-color;
							width: 70upx;
						}
					}
				}

				.distance {
					margin-top: 10upx;
					font-size: 24upx;
					color: #999;
				}
			}

			.switch {
				width: 200upx;
			}
		}

		.tips {
			display: flex;
			align-items: center;
			color: #333;
			font-size: 28upx;
		}
	}

	.VerticalBox {
		height: calc(100vh - 220upx);
		display: flex;

		.VerticalNav {
			font-size: 28upx;
			background-color: #f0efef;
			width: 170upx;
			white-space: initial;

			.cu-item {
				padding: 20upx 0;
				width: 100%;
				text-align: center;
				margin: 0;
				border: none;
				height: 80upx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				.content {
					text-align: center;

					image {
						width: 50upx;
						height: 50upx;
					}

					.content-text {
						font-size: 28upx;
					}
				}
			}

			.cur {
				border-left: 3px $uni-color-green solid;
				background-color: #fff;
				color: $uni-color-green;
			}
		}

		.VerticalMain {
			background-color: #f5f5f5;
			flex: 1;

			.box {
				background-color: #ffffff;
				margin: 20upx;
				padding: 20upx;
				border-radius: 20upx;

				.title {
					font-weight: 600;
					font-size: 28upx;
				}

				.item-box {
					display: flex;

					margin-top: 20upx;
					padding-bottom: 20upx;

					.img-box {
						width: 180upx;

						image {
							border-radius: 10upx;
							width: 100%;
						}
					}

					.content-box {
						display: flex;
						flex-flow: column;
						justify-content: space-between;
						padding-left: 20upx;
						flex: 1;

						.title-box {
							.title {
								font-size: 32upx;
								font-weight: 500;
								display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
								-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
								-webkit-line-clamp: 1; //限制行数
								overflow: hidden; //超出部分隐藏
								text-overflow: ellipsis; //用一个省略号代替超出的内容
							}

							.tag {
								margin-top: 8upx;

								.tag-item {
									font-size: 24upx;
									padding: 6upx 10upx;
									background-color: $uni-bg-color-grey;
									color: $uni-text-color-grey;
								}

								.tag-item:not(:first-of-type) {
									margin-left: 10upx;
								}
							}

							.describe {
								font-size: 22upx;
								line-height: 30upx;
								margin-top: 8upx;
								color: #999;

								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2; //是几行就修改成数字几
								overflow: hidden;
							}
						}

						.btn {
							display: flex;
							margin-top: 10upx;
							align-items: center;

							.price {
								color: $uni-color-error;
								width: 50%;
								font-size: 30upx;
								font-weight: 500;
							}

							.add {
								width: 50%;
								display: flex;
								justify-content: flex-end;

								.add-text {
									padding-left: 16upx;
									padding-right: 16upx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>